<template>
    <div class="orderMain">
        <div class="buttons">
            <el-button type="danger" size="small" @click="deleteOrder" style="margin-left:10px;margin-top: 10px" icon="el-icon-delete">删除</el-button>
        </div>
        <el-table
                ref="orderTable"
                :data="orderData"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    width="320">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="skuName"
                    width="420"
                    label="商品名称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="qty"
                    label="数量"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="totalPrice"
                    label="总价"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="created_at"
                    label="创建时间"
                    show-overflow-tooltip>

            </el-table-column>
            <el-table-column
                    prop="updated_at"
                    label="最后更新时间"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div class="pager">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>public

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import moment from "moment";
    @Component({
        components:{
        }
    })
    export default class OrderList extends Vue {
        [x: string]: any;
        public searchText="";
        public isShowAddDialog=false;
        public orderData:any=new Array();
        public total:number=0;
        public pageSize=10;
        public curPage=1;
        async created(){
            await this.initPageData();
        }
        public async initPageData(){
            let orders=await AdminApiActions.listUserOrder({pageSize:this.pageSize,curPage:this.curPage});
            orders.data.data.forEach(item=>{
                item.totalPrice=item.qty*item.price;
                item.created_at=moment(item.created_at).format("YYYY-MM-DD HH:mm");
                item.updated_at=moment(item.updated_at).format("YYYY-MM-DD HH:mm");
            });
            this.orderData=orders.data.data;
            this.total=orders.data.count;
        }
        public async search(){

        }
        public async handleSizeChange(pageSize){
            this.pageSize=pageSize;
            await this.initPageData();
        }
        public async handleCurrentChange(curPage){
            this.curPage=curPage;
            await this.initPageData();
        }
        //删除用户选中订单
        public async deleteOrder(){
            let orderTables:any=this.$refs.orderTable;
            let selectData:Array<any>=orderTables.selection;
            let ids:Array<any>=new Array<any>();
            selectData.forEach(item=>{
                ids.push(item.id);
            });
            this.curPage=1;
            await AdminApiActions.deleteUserOrder({ids:ids});
            await this.initPageData();
        }

    }
</script>
<style lang="less">
    .orderMain{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .pager{
            height: 60px;
            background-color: white;
            display: flex;
            align-items: center;
        }
    }

</style>
